import { Component, OnInit } from '@angular/core';
import { MatListOption } from '@angular/material/list';
import { MapServerService } from '../map-server/map-server.service';

@Component({
  selector: 'app-list-component',
  templateUrl: './list-component.component.html',
  styleUrls: ['./list-component.component.scss']
})
export class ListComponentComponent implements OnInit {
  public posArr?: any[] = [];
  public choiceArr?: any[] = [];

  constructor(private mapServerService: MapServerService) { }

  ngOnInit(): void {
  }

  public addMarker() {
    this.mapServerService.removeAllMarker
    this.mapServerService.setPosArr();
    this.posArr = this.mapServerService.getPosArr();
    this.posArr?.forEach(item => item.completed = false);
    console.log(this.posArr);
  }

  public choice(pos: google.maps.LatLng | google.maps.LatLngLiteral) {
    this.mapServerService.setCenter(pos);
  }

  public choiceFile(event: any) {
    console.log(event);
    console.log(event.target.files);
    console.log(event.target.value);
    // const parser = new OpenLayers.Format.GeoJSON(),
    // const vector = new OpenLayers.Layer.Vector("Converted"),
    // new Shapefile({
    //   shp: event.target.files,
    //   dbf: "/uploads/shpjson/testdata/world.dbf"
    // }, function (data: any) {
    //   var features = parser.read(data.geojson);
    //   vector.addFeatures(features);

    //   // console.log("took", new Date - starttime, "milliseconds")
    //   console.log(data);

    //   //export geojson
    //   // var str = JSON.stringify(data.geojson);

    //   //Save the file contents as a DataURI
    //   // var dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(str);

    //   //Write it as the href for the link
    //   // var link = document.getElementById('link').href = dataUri;

    // })
  }

  public addPolygon() {
    const posArr = this.posArr?.filter(item => item.completed) || [];
    posArr.push(posArr[0]);
    if (this.mapServerService.getPolygon()) {
      this.mapServerService.setPolygon({ paths: posArr });
    } else {
      this.mapServerService.createPolygon({ paths: posArr });
    }
    this.mapServerService.removeAllMarker();
    this.posArr = [];
  }

  public choiceColor(event: any) {
    this.mapServerService.setPolygon({ fillColor: event.target.value || '#FF0000' })
  }

}
